<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<style type="text/css">
		.bigbox{
			width: 100%;height: 100%;
		}
		.bigbox>img{
			width: 100%;height: 100%;
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.bigbox>p{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}
		span{
			display: inline-block;
			width: 200px;
			border: 1px solid red;
		}
		.on{
			background-color: #008000;
			color: white;
		}
		img{
			width: 100%;height: auto;
			display: block;
		}
	</style>
    <!--react的核心库-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!--react的与dom相关的一些功能-->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!--将浏览器不支持的jsx语法转化为js语法-->
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>
<body>
      <div id="root"></div>    
</body>

</html>
<script type="text/babel">
      var data=["img/a1.jpg","img/a2.jpg","img/a3.jpg","img/a4.jpg"]
	  var myIndex=0
	  
	  let clickFn=(index)=>{
		 myIndex=index
		 render()
	  }
	  
	  let render=()=>{
		  
		  ReactDOM.render(
			  <div className="bigbox">
			      <img src={data[myIndex]}/>
				  <p>
				  {
					  data.map((val,index)=>{
						return <span key={index} onClick={self.clickFn.bind(this,index)}><img src={val}/></span> 
					  })
				  }
				  </p>
			  </div>,
			  document.getElementById("root")  
		  )
	  }
	  render()
	  
</script>
